import { Table, Pagination, Popconfirm, Button } from 'antd';
import  styles from './Users.css';
import { PAGE_SIZE } from '../constants';
import { routerRedux } from 'dva/router';
import UserModal from './UserModel';

export default function Users({ dispatch, list: dataSource, loading, total, page: current }) {
  // console.log(dataSource)

  function deleteHandler(id) {
    dispatch({
      type: 'users/remove',
      payload: id,
    });
  }

  function pageChanged(page) {
    dispatch(routerRedux.push({
      pathname: '/users',
      query: {page},
    }));
  }
  function editHandler(id, values) {
      dispatch({
          type: 'users/patch',
          payload: { id, values },
      });
  }

  function createHandler(values) {
    dispatch({
      type: 'users/create',
      payload: values,
    })
  }

  const column = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a href="">{text}</a>
    },{
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
    },{
      title: 'Website',
      dataIndex: 'website',
      key: 'website',
    },{
      title: 'Operation',
      key: 'operation',
      render: (text, record) => (
        <span className={styles.operation}>
          <UserModal record={record} onOk={editHandler.bind(null, record.id)}>
+            <a>Edit</a>
+          </UserModal>
+          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, record.id)}>
            <a href="">Delete</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  return(
    <div className={styles.normal}>
      <div>
        <div className={styles.create}>
                <UserModal record={{}} onOk={createHandler}>
                   <Button type="primary">Create User</Button>
                </UserModal>
        </div>
        <Table
          loading={loading}
          dataSource={dataSource}
          columns={column}
          pagination={false}
        />

        <Pagination
          className="ant-table-pagination"
          total={total}
          onChange={pageChanged}
          current={current}
          pageSize={PAGE_SIZE}
        />
      </div>
    </div>
  )
}

